<template>
  <div id="app">
    <el-dialog
      :title="formData.id?'编辑管理员':'添加管理员'"
      :visible="dialogVisible"
      width="45%"
      @close="cancelbtn"
    >
      <el-form inline :model="formData" :rules="rules" ref="refform">
        <el-form-item label="管理员名称" prop="username">
          <el-input placeholder="请输入用户名" v-model="formData.username" />
        </el-form-item>
        <el-form-item label="管理员邮箱" class="itemodd" prop="email">
          <el-input placeholder="请输入邮箱" v-model="formData.email" />
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input placeholder="请输入密码" v-model="formData.password" />
        </el-form-item>
        <el-form-item label="管理员手机" class="itemodd" prop="phone">
          <el-input placeholder="请输入手机号" v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="管理员状态" prop="status">
          <span>禁用</span>
          <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="formData.status"></el-switch>
          <span>启用</span>
        </el-form-item>
        <el-form-item label="管理员头像" class="itemphone">
          <Images @sendOut="sendOut" />
          <!-- <el-button size="small" type="success" >
            <i class="el-icon-upload"></i> 选择
          </el-button>-->
        </el-form-item>
        <el-form-item label="管理员角色" prop="roleid_list">
          <el-checkbox-group v-model="formData.roleid_list">
            <el-checkbox
              :label="item.id"
              :value="item.id"
              v-for="item in listgetrole"
              :key="item.id"
            >{{item.role_name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="btnitem">
          <el-button @click="cancelbtn">取消</el-button>
          <el-button type="primary" plain @click="adduserItem">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template> 
<script>
import {
  getrole,
  adduserItem,
  getuserItem,
  edituserItem
} from "@/api/permission/users";
import Images from "./image.vue";
export default {
  name: "tables",
  components: {
    Images
  },
  data() {
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (regEmail.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的邮箱账号"));
    }; //邮箱验证
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的手机号"));
    }; //手机号验证
    var checkpassword = (rule, value, callback) => {
      const passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/;
      if (!passwordreg.test(value)) {
        callback(new Error("密码必须由数字、字母、特殊字符组合,请输入8-20位"));
      } else {
        callback();
      }
    }; //密码验证
    return {
      dialogVisible: false, //弹框变量
      listgetrole: [], //角色列表
      formData: {
        //表单变量
        // username: "zhangsan",
        // email: "5874638@qq.com",
        // password: "zed3335871.",
        // phone: "15236947888",
        // status: false,
        // avatar: "",
        // roleid_list: []
        username: "",
        email: "",
        password: "",
        phone: "",
        status: false,
        avatar: "",
        roleid_list: []
      },
      //验证规则对象
      rules: {
        username: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
          { min: 1, max: 8, message: "用户名要求3-8位", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkpassword, trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ]
      }
      // dialogs:false
    };
  },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  created() {
    this.getrole();
  },
  methods: {
    async getrole() {
      const { data } = await getrole();
      this.listgetrole = data.list;
      console.log(this.listgetrole);
    }, //获取角色列表
    async adduserItem() {
      //添加管理员
      try {
        await this.$refs.refform.validate(); //主动校验
        if (this.formData.id) {
          await edituserItem({
            ...this.formData,
            id: this.id
          });
          this.$message.success("更新信息成功");
        } else {
          await adduserItem(this.formData);
          this.$message.success("添加成功");
        }
        this.formData = {
          //清空表单
          username: "",
          email: "",
          password: "",
          phone: "",
          status: false,
          avatar: "",
          roleid_list: []
        };
        this.dialogVisible = false; // 关闭弹层
        this.$emit("tables"); //更新视图
      } catch (err) {
        console.log(err);
      }
    },
    async getuserItem(id) {
      const { data } = await getuserItem(id);
      console.log(data);
      this.formData = data;
    }, //编辑回显数据
    async cancelbtn() {
      this.dialogVisible = false;
      this.formData = {
        //清空表单
        username: "",
        email: "",
        password: "",
        phone: "",
        status: false,
        avatar: "",
        roleid_list: []
      };
    },
    sendOut(val) {
      console.log(val, 9999999);
      this.formData.avatar = val;
    }
  }
};
</script>

<style scoped lang='scss'>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #1890ff;
  line-height: 50%;
}
.itemodd {
  margin-left: 60px;
}
.itemphone {
  margin-left: 143px;
}
::v-deep .el-switch__core {
  margin: 0 5px;
}
.btnitem {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>